{% extends "templates/base.html" %}

{% block javascript %}
<script src="http://www.google.com/jsapi?key={{ google_calendar_key }}" type="text/javascript"></script>
<script src="/scripts/scriptaculous/1.8.1/prototype.js" type="text/javascript"></script>
<script src="/scripts/google-calendar/cal_Auth.js" type="text/javascript"></script>

<script type="text/javascript" language="javascript">
	// <![CDATA[

	document.observe('dom:loaded', function() {
		// show map
		$('map_canvas').show();
		$('map_canvas').setStyle({
			width: '400px',
			height: '400px'
		});
	});

	// ]]>
</script>
{% endblock %}

{% block title%}View Ride{% endblock %}

{% block main %}

<!--this img for calendar scripts loading purpose, do not remove-->
<img src="images/rss.gif" style="position:absolute; top: -1000px;" />

	<h2>view ride</h2>
	<h3>{{ ride.get_name }}</h3>
	{% if has_occurred %}<h3 class="full">This ride took place on {{ ride.date|date_for_table }} and is now closed</h3>{% endif %}
	<p> <!-- ride details -->
		<strong>Date</strong> {{ ride.date|date_for_table }}<br />
		<strong>Seats </strong> {{ride.count_seats}} <br />
		<strong>Passengers </strong> {{ride.count_passengers}} <br />
		<p />
		<strong>Departs from </strong><a href="/location?id={{ ride.source.key.id }}">{{ ride.source.get_addressname }}</a><strong> at </strong>{{ ride.departure_time|time_for_table }} <br />
		<strong>Arrives at </strong><a href="/location?id={{ ride.destination.key.id }}">{{ ride.destination.get_addressname }}</a><strong> at </strong> {{ ride.arrival_time|time_for_table }} (estimated)<br />

		{% if ride.notes %}
		<p />
			<strong>Notes</strong> {{ ride.notes|escape }}<br />
		{% endif %}
		<p />

		<strong>Driver</strong> {{ride.owner.get_name_tag }}
		{% if enable_feedback_on_driver %} <!-- if the ride has occurred and current user, enable feedback -->
			   <a href="/feedback_create?ride={{ride.key.id}}&amp;on={{ride.owner.key.id}}"><strong>Place feedback</strong></a>
			   <p><strong>You can now place feedback on the driver</strong></a><br />
			   As you were a passenger on this ride, you are now able to place feedback on the driver which will be visible to other users
			   on their <a href="/feedback?id={{ride.owner.key.id}}">feedback page</a> and will contribute to their social score</p>
		{% endif %}<br/>

	<p />

{% if enable_edit_controls %}
<form method="post" >	 <!-- cancel ride form -->
	<p><strong>Cancel your ride</strong></br>
	You are the driver on this ride. But if your plans have changed and you cannot
	take the ride then you should cancel
	the ride. All passengers that you have approved on the ride will be notified
	of the cancellation so they have time to make other plans.
	</p>
	<input type="hidden" name="do_cancel_ride" value="True"/>
	<input class="button"  value="Cancel Ride" type="submit">
</form>
{% endif %}

{% if enable_passenger_withdraw %}
<form method="post" >	 <!-- passenger withdraw from ride form -->
	<p><strong>Withdraw from this ride</strong></br>
	Because you are a passenger on this ride, you can withdraw from it at any time.
	If your plans have changed and you cannot take the ride then you should withdraw
	from the ride as soon as possible to give the driver time to assign your seat
	to someone else.
	</p>
	<input type="hidden" name="do_passenger_withdraw" value="True"/>
	<input class="button"  value="Withdraw" type="submit">
</form>
{% endif %}

<!-- calendar scripts begin-->
{% if not has_occurred %}
	<!--hidden field use to insert into calendar-->
	<input id="from" type="hidden" value="{{ ride.source.get_addressname }}" />
	<input id="to" type="hidden" value="{{ ride.destination.get_addressname }}" />
	<input id="startTime" type="hidden" value="{{ ride.date }}T{{ ride.departure_time }}.00Z" />
	<input id="endTime" type="hidden" value="{{ ride.date }}T{{ ride.arrival_time }}.00Z" />
	<input id="ride_id" type="hidden" value="{{ride.key.id }}" />

	<br/>
	<form id="log_in"  style="display:none">
		<!--if no google calendar Token show following field-->
		<strong>Create a google calendar reminder:</strong>&nbsp;&nbsp;&nbsp;<input type="button" class="button" value="Grant access" onClick=" logMeIn(); return false;" >
	</form>
	
	<form id="wait" style="display:none">
		<strong>Processing, please wait... </strong>
	</form>
				
	<!--if has google calendar Token show following field-->
	<form id="add_event" style="display:none"  name="remindForm">
		<strong>Create a google calendar reminder:</strong><br/>

		<span id="errorMs" style="display:none"><ul class="errorlist"><li>Please enter a time between 5 minutes and 28 days.</li></ul></span>
		<table>
			<tr>
				<td>
					<input id="byEmail" class="checkbox" type="checkbox" name="reminder" value="email" >Email&nbsp;&nbsp;&nbsp;
				</td>
				<td>
					<input id="remindTime1" type="text" name="remindTime1" value="30" />
					<select id="timeBase1">
						<option>minutes</option>
						<option>hours</option>
						<option>days</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>
					<input id="bySms" class="checkbox" type="checkbox" name="reminder"	 value="sms" >SMS &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				</td>
				<td>
					<input id="remindTime2" type="text" name="remindTime2" value="30" />
					<select id="timeBase2">
						<option>minutes</option>
						<option>hours</option>
						<option>days</option>
					</select>
				</td>
			</tr>
		</table>
		
		<br/>
		<span id="addcalendar">
			<input id="create" class="button" type="button" value="Create" onClick="valid_insert();return false; "/>
		</span>
	</form>
	<!--calendar scripts end-->

	{% ifnotequal ride.owner current_user %} <!-- don't show 'request a seat' to ride owner -->
		<form method="post"><!-- request a seat form-->
			{% if is_full %} <!-- then show a 'no seats available' message-->
				<h3 class="full">No more seats available</h3>
				<strong>Sorry, the driver has approved passengers for all of the available seats on this ride.</strong>
			{% else %}
				{% if not requestable %} <!-- the user has already requested, show the instruction-->
					<strong>
						Your request for a seat on this ride has been recorded
						and you will be notified when it is approved.
					</strong>
				{% else %} <!-- not full, so show the # of seats and request button-->
					<h3 class="green">{{ ride.count_emptyseats }} seat{{ ride.count_emptyseats|pluralize }} available</h3>
					<input type="hidden" name="do_request_ride" value="True"/>
					<input class="button"  value="Request a Seat" type="submit">
				{% endif %}
			{% endif %}
		</form>
	{% endifnotequal %} <!-- end if not owner -->
	<p/>
{% endif %} <!-- end if not has occurred -->

{% if has_passengers %}<!-- show passengers -->
<hr />

<table>
	<h2>passengers</h2>
	<tr>
		<th>User</th>
		<th>Date Accepted</th>
	</tr>
	{% for seat in ride.seats %}
	  {% if seat.passenger %}
			<tr class="row-a">
				<td>
					{{seat.passenger.get_name_tag}}
				</td>
				<td>
					{{seat.accepted|date_for_table}}
				</td>
				{% if enable_feedback_on_passengers %} <!-- show the feedback link -->
					<td>
						 <a href="/feedback_create?ride={{ride.key.id}}&amp;on={{seat.passenger.key.id}}"><strong>Place Feedback</strong></a></td>
					</td>
				{% endif %}
				{% if enable_edit_controls %}<!-- show the remove passenger link -->
					<td>
						 <a href="/ride?id={{ride.key.id}}&amp;seat_id={{seat.key.id}}&amp;action=RM"><strong>Remove User</strong></a></td>
					</td>
				{% endif %}
			</tr>
	  {% endif %}
	{% endfor %}
</table>
{% if enable_feedback_on_passengers %} <!-- show the feedback on passenger instruction -->
	<p><strong>You can now place feedback on passengers</strong></a><br />
	As you were a the driver on this ride, you are now able to place feedback on
	your passenger which will be visible to other users
	on their feedback page and will contribute to their social score.
	</p>
{% endif %} <!-- end if show feedback instruction -->

{% endif %}<!-- end if show passengers -->


{% if enable_edit_controls %} {% if ride.passengerrequests.count %}  <!-- show passenger requests -->
<hr />

<table>
<h2>passenger requests</h2>
	<tr>
	<th>User</th>
	<th>Date Requested</th>
	</tr>
	{% for prq in ride.passengerrequests %}
		<tr class="row-a">
			<td>
				{{prq.owner.get_name_tag}}
			</td>
			<td>
				{{prq.created|date_for_table}}
			</td>
			{% if enable_edit_controls %} <!-- show "approve" -->
				<td>
				 	<a href="/ride?id={{ride.key.id}}&amp;prq_id={{prq.key.id}}&amp;action=APRV"><strong>Approve Request</strong></a></td>
				</td>
			{% endif %}
		</tr>
	{% endfor %}
	</table>
{% endif %}{% endif %}<!-- end if show passenger requests -->


{% if lat_lng_src and lat_lng_des %}
	<p> <!-- Static Google Map -->
	<noscript>
		<h2>map</h2>
		<img class="map_image" src="http://maps.google.com/staticmap?&amp;size=400x400&amp;markers={{lat_lng_src}},reds%7C{{lat_lng_des}},blued&amp;key={{ googlemaps_key }}"/>
	</noscript>
	</p>
	<html xmlns="http://www.w3.org/1999/xhtml">
	  <head>
	  <!-- Javascript Map Version -->
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		<title>Google Maps JavaScript API Example</title>
		<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key={{ googlemaps_key }}"
				type="text/javascript"></script>
		<script type="text/javascript">
	 // JavaScript Document
		var bounds = new GLatLngBounds();
		var map;
		var directionsPanel;
		var directions;
		function initialize() {
			var map = new GMap2(document.getElementById("map_canvas"));
			map.setCenter(new GLatLng({{lat_lng_src}}), 13);

			var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10));
			var bottomRight = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10));
			map.addControl(new GSmallMapControl());

		  //Shows the route between destination and source
			directionsPanel = document.getElementById("route");
			directions = new GDirections(map, directionsPanel);
			directions.load("from: {{ ride.source.address }} to: {{ ride.destination.address }}");

			map.setZoom(map.getBoundsZoomLevel(bounds));
			map.setCenter(bounds.getCenter());
		}
		</script>
	  </head>
	  <body onLoad="initialize()" onUnload="GUnload()">
		<div id="map_canvas" class="map_canvas" style="display: none;"></div>
	  </body>
	</html>

{% endif %}

<p /><hr />



{% if message_list %}	 <!-- ride messages -->
<h2>discussion</h2>
<table class="messages">
	{% for message in message_list %}
	   <tr class="message-{{ message.style }}"> <td>
		<strong>{{message.title|escape }}</strong><br/>
		<a href="/profile?id={{ message.author.key.id }}">{{message.author.user.email}}</a>{% ifequal message.style "user" %} {% else %} ({{ message.style }}) {% endifequal %}	 {{message.created|datetime_for_table}} <br/>
	</td></tr>
	<tr class="message-text" ><td>
	{{message.text|escape}}
	</td></tr>
	<tr class="message-space"></tr>
	{% endfor %}
</table>

{% endif %}

<form method="post"> <!-- message form -->
<h3>post a message</h3>
	<div class="inputgroup">
			<strong>Title </strong><input type="text" name="message_title" />
		  </div>

			<div>
			<strong>Type your message here</strong>
			<textarea name="message_body"></textarea>

			<input type="hidden" name="do_post_message" value="True"/>
			<input class="button" value="Submit" type="submit"/>
	</div>
	<p>
	<strong>Discuss the ride with the driver and other RoadMate users</strong></br>
	If you have a question about the ride, this is the best place to ask it.
	Please try and keep your comments free of
	 inappropriate or offensive language.

	 </p>
</form>


<p /><hr />
<p />
{% endblock %}
